

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">开团</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div class="layui-tab layui-tab-brief" lay-filter="demo">

  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">


    </div>
    <div class="layui-tab-item">
      <div id="laydateDemo"></div>
    </div>
    <div class="layui-tab-item">
      <div id="pageDemo"></div>
    </div>
    <div class="layui-tab-item">

    </div>
    <div class="layui-tab-item">
      <div id="sliderDemo" style="margin: 50px 20px;"></div>
    </div>
  </div>
</div>

<script src="//res.layui.com/layui/dist/layui.js?t=1575889601624"></script>
<script>
  layui.config({
    version: '1575889601624' //为了更新 js 缓存，可忽略
  });

  layui.use(['laydate','form','view', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','admin','jquery'], function(){
    var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,admin = layui.admin
            ,view = layui.view
            ,form = layui.form
            ,$ = layui.jquery

    //监听Tab切换
    element.on('tab(demo)', function(data){
      layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
        tips: 1
      });
    });
    //执行一个 table 实例
    table.render({
      elem: '#demo'
      ,height: 700
      ,url: '/stone/line/lineShow' //数据接口
      ,title: '线路表'
      ,page: true //开启分页
      ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'lineId', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'lineName', title: '线路名', width:280}
        ,{field: 'lineStart', title: '出发地', width: 250, sort: true, totalRow: true}
        ,{field: 'lineEnd', title: '目的地', width:250, sort: true}
        ,{field: 'tourId', title: '导游', width: 200, sort: true, totalRow: true}
        ,{field: 'money', title: '费用', width:200}
        ,{field: 'transName', title: '交通工具', width: 200}
        ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
      ]]
    });
    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
              ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          layer.msg('添加');
          break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个');
          } else {
            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
          }
          break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else {
            layer.msg('删除');
          }
          break;
      };
    });
    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              ,layEvent = obj.event; //获得 lay-event 对应的值
      console.log(data);
      if(layEvent === 'detail'){
        layer.msg('开团');
        admin.popup({
          title: '添加'
          ,area: ['420px', '450px']
          ,content:'map.html'
        })


      } else if(layEvent === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){
        layer.msg('编辑操作');
      }
    });

    //底部信息
    var footerTpl = lay('#footer')[0].innerHTML;
    lay('#footer').html(layui.laytpl(footerTpl).render({}))
            .removeClass('layui-hide');
  });
</script>
</body>
</html>        